<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .newbox{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>num:{{ num }}</div>
        <div :class="classname"></div>
        <button @click="fn(11)">点击num=11</button>
     </div>
     <script>
         var vm =  new  Vue({
             el:"#app",
             data:{
                 num:10,
                 classname:"box"
             },
             methods: {
                 fn(b){
                     // console.log(b);
                     // 获取data中的属性值
                     console.log(this.num);  //10
                     // 设置data中的属性值
                     this.num = b;
                     this.classname = "newbox"
                 }
             },
         })
     </script>
</body>

</html>